<template>
  <div id="app">
    <div class="header">
      <el-button style="margin-right:20px" @click="handleCity">{{ positionCity }}</el-button>
      <el-input
        placeholder="请输入内容"
        prefix-icon="el-icon-search"
        v-model="iptVal"
        style="width: 800px"
        @focus="handleSearch"
      >
      </el-input>
    </div>

    <div class="banner">
      <el-carousel trigger="click" height="500px">
        <el-carousel-item v-for="item in banners" :key="item.id">
          <img
            :src="item.imgUrl"
            alt=""
            style="width: 100%; height: 100%; border-radius: 10px"
          />
        </el-carousel-item>
      </el-carousel>
    </div>

    <div class="container">
      <div class="hotMusic">
        <div class="title">
          <div>
            <img src="../../assets/icon/hot.png" alt="" />
            <span>热门歌曲</span>
          </div>
          <div @click="handleHotMusic">更多></div>
        </div>
        <div class="content">
          <MusicItem
            v-for="item of hotItems"
            :key="item.id"
            :item="item"
          ></MusicItem>
        </div>
      </div>

      <div class="newMusic">
        <div class="title">
          <div>
            <img src="../../assets/icon/new.png" alt="" />
            <span>最新音乐</span>
          </div>
          <div @click="handleNewMusic">更多></div>
        </div>
        <div class="content">
          <MusicItem
            v-for="item of newItems"
            :key="item.id"
            :item="item"
          ></MusicItem>
        </div>
      </div>

      <div class="djMusic">
        <div class="title">
          <div>
            <img src="../../assets/icon/dj.png" alt="" />
            <span>主播电台</span>
          </div>
          <div @click="handleDjMusic">更多></div>
        </div>
        <div class="content">
          <MusicItem
            v-for="item of djItems"
            :key="item.id"
            :item="item"
          ></MusicItem>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import MusicItem from "./components/Item.vue";

export default {
  components: {
    MusicItem,
  },
  data() {
    return {
      iptVal: "",
      banners: [],
      hotItems: [],
      newItems: [],
      djItems: [],
      positionCity: "尚未定位",
    };
  },
  methods: {
    handleSearch() {
      this.$router.push("/music/search");
    },
    handleCity() {
      this.$router.push(`/city`);
    },
    handleHotMusic() {
      this.$router.push(`/music/indexKind?kind=hot`);
    },
    handleNewMusic() {
      this.$router.push(`/music/indexKind?kind=new`);
    },
    handleDjMusic() {
      this.$router.push(`/music/indexKind?kind=dj`);
    },

    getLocalStorage(key) {
      var val = localStorage.getItem(key);
      var reg = /^[[{].*[\]}]$/;
      if (reg.test(val)) {
        val = JSON.parse(val);
      }
      return val;
    },
  },
  mounted() {
    var city = this.getLocalStorage("city");
    if (city) {
      this.positionCity = city;
    }
    this.$http("http://47.108.197.28:8000/banner").then((res) => {
      this.banners = res.data.res;
    });
    this.$http("http://47.108.197.28:3000/top/playlist/highquality").then(
      (res) => {
        this.hotItems = res.data.playlists.slice(0, 3);
      }
    );
    this.$http("http://47.108.197.28:3000/album/newest").then((res) => {
      res.data.albums.forEach((item) => {
        item.coverImgUrl = item.blurPicUrl;
        item.playCount = item.id;
      });
      this.newItems = res.data.albums.slice(0, 3);
    });
    this.$http("http://47.108.197.28:3000/personalized/djprogram").then(
      (res) => {
        res.data.result.forEach((item) => {
          item.coverImgUrl = item.picUrl;
          item.playCount = item.id;
        });
        this.djItems = res.data.result.slice(0, 3);
      }
    );

  },
};
</script>

<style scoped>
.header {
  font-size: 18px;
  display: flex;
  align-items: center;
  padding: 0 20px;
  margin-top: 10px;
}
.el-input__inner {
  border-radius: 50px;
}

.banner {
  padding: 10px 20px;
}
.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n + 1) {
  background-color: #d3dce6;
}

.title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 10px;
  margin-bottom: 20px;
}
.title > div:nth-child(1) {
  display: flex;
  align-items: center;
}
.title img {
  width: 40px;
  height: 40px;
}

.container > div {
  margin-bottom: 20px;
}
.content {
  display: flex;
  justify-content: space-between;
}
</style>